import React from "react"
import { Image, View } from "@tarojs/components"
import { useRouter, useDidShow, hideHomeButton } from "@tarojs/taro"
import { navigationPlugin } from "@/utils/router"
import GpNavbar from "@/components/GpNavbar"
import styles from "./index.module.scss"

type Params = {
  /** plugin page name */
  name: string
}
/**
 * H5 网页跳转小程序中间页
 * @description 目前仅用作处理跳转插件页
 */
function MiddlePage() {
  const router = useRouter<Params>()
  useDidShow(hideHomeButton)
  function renderLeftExtra(backHandler: () => void) {
    return (
      <View className="text-32px leading-none" style={{ color: "#333333" }} onClick={backHandler}>
        首页
      </View>
    )
  }
  function handleNavigate() {
    if (router.params.name) {
      console.log("跳转插件页:", router.params.name)
      navigationPlugin(router.params.name)
    }
  }
  return (
    <View className={styles.containner}>
      <GpNavbar
        navigationBarTitleText={null}
        navigationBarBackgroundColor="transparent"
        navigationBarPlaceholder={false}
        homeIcon="icon-dingbu-fanhui"
        renderLeftExtra={renderLeftExtra}
      />
      <Image
        src="https://static.91goodschool.com/UpFiles/gp/1000/202411/30/113156922982.png"
        className={styles.image}
        mode="widthFix"
      />
      <View className={styles.visitBtn} onClick={handleNavigate}>
        去访问
      </View>
    </View>
  )
}
export default MiddlePage
